<template>
  <div class="form-setting-panel">
    <!-- start 标题 -->
    <form-title-setting
      :field="field"
      :setting="setting"
      :disabled="field.fieldName!=='provideQuality'"
      @input="updateForDom"
    ></form-title-setting>
    <!-- end 标题 -->

    <!-- start 描述信息 -->
    <form-describe-setting
      :field="field"
      @input="updateForDom"
    ></form-describe-setting>
    <!-- end 描述信息 -->

    <!-- start 校验 -->
    <div class="form-setting-group form-setting-item">
      <h4 class="form-item-title">{{$t('common.base.check')}}</h4>
      <div class="form-item-box">
        <!-- 必填 -->
        <form-required-setting :field="field" @input="update"></form-required-setting>
      </div>
    </div>
    <!-- end 校验 -->

    <!-- start 选项 -->
    <div class="form-setting-options">
      <h4>{{$t('common.base.option')}}<el-checkbox v-if="isEngineerFlag" disabled class="form-select-setting-isMulti" :value="field.isMulti" @input="update($event, 'isMulti')">{{$t('common.base.multiple')}}</el-checkbox></h4>
      <div class="form-select-setting-list">
        <draggable tag="div" class="list-group" :list="options" v-bind="{ animation:380 }" handle=".handle">
          <div v-for="(option, index) in options" :key="index" class="form-select-setting-option">
            <button type="button" class="btn-text handle"> <i class="iconfont icon-tuozhuaipaixu"></i></button>
            <input type="text" :value="option.value" @input="updateOption($event, option)" :maxlength="optionMaxLength">
            <button type="button" class="btn-text form-select-setting-delete" @click="delOption(option, index)"><i class="iconfont icon-minus-fill"></i></button>
            <template v-if="!field.isMulti">
              <button type="button" :class="['btn-text', 'form-select-setting-default',option.isDefault && 'btn-active']" @click="setDefaultOption(option)"> <i class="iconfont icon-check-fill"></i></button>
              <span class="form-select-setting-defaultValue" v-if="option.isDefault">{{$t('common.base.default')}}</span>
            </template>
          </div>
        </draggable>
      </div>
      <div class="form-setting-group form-select-setting-operation form-select-setting-btnbox">
        <button type="button" class="btn-text" @click="addOption">{{$t('common.base.addOption')}}</button>
        <div class="btn-divider"></div>
        <button type="button" class="btn-text" @click="showBatchModal">{{$t('common.base.bulkEdit')}}</button>
      </div>
    </div>
    <!-- end 选项 -->

    <!-- start 选项显示模式 -->
    <form-displaymode-setting :field="field" :is-multi="false" @input="update"></form-displaymode-setting>
    <!-- end 选项显示模式 -->

    <!-- start 批量编辑选项 -->
    <base-modal
      :title="$t('common.base.batchEditOptions')" width="520px" class="form-select-setting-modal"
      :show.sync="batchModalShow" :mask-closeable="false">
      <div class="form-select-setting-batch">
        <textarea :value="optionText" @input="updateOptionText" rows="10"></textarea>
        <div class="form-select-setting-warn" v-if="errMessage">{{errMessage}}</div>
      </div>
      <div slot="footer" class="dialog-footer">
        <span class="form-select-tips">{{$t('common.base.everyLinePointToOneOption')}}</span>
        <el-button @click="batchModalShow = false">{{$t('common.base.cancel')}}</el-button>
        <el-button type="primary" @click="batchEdit">{{$t('common.base.save')}}</el-button>
      </div>
    </base-modal>
    <!-- end 批量编辑选项 -->
  </div>
</template>

<script>
import {
  SELECT_OPTION_LENGTH_MAX,
  FORM_FIELD_LOGICAL_DISABLE, SELECT_OPTION_MAX
} from '../../../config'

import _ from 'lodash';
import draggable from 'vuedraggable';
import LogicalFieldModal from './../components/LogicalFieldModal';
import SettingMixin from '@src/component/form/mixin/setting';
import FormSelectMixin from '@src/component/form/mixin/form.select';
import { settingProps } from '@src/component/form/components/props';
import Platform from '@src/platform';
import {alert as feAlert} from '@src/util/platform';
import locales, { t } from '@src/locales'
export default {
  name: 'service-manage-grade-setting',
  mixins: [SettingMixin, FormSelectMixin],
  props: {
    ...settingProps,
    /** 用于获取FormDesign实例 */
  },
  computed: {
    optionMaxLength(){
      return SELECT_OPTION_LENGTH_MAX
    },
    // 是否是工程师资质
    isEngineerFlag() {
      return this.mode === 'service_engineer'
    },
  },
  data(){
    return {
      index: this.field.options.length,
      batchModalShow: false,
      optionText: '', // 批量编辑文本
      errMessage: null
    }
  },
  methods: {
    updateOption(event, option){
      option.value = event.target.value;
      option.language[locales.locale] = event.target.value
      this.$emit('input', {value: this.field, prop: 'dependencies', operate: 'delete'})
    },
    delOption(option, index){
      if(this.options.length <= 1) return feAlert(this.$t('common.base.tip.evenHaveOneOption2'))

      // 如果是删除默认值，清空默认值
      if(option.isDefault) this.$emit('input', {value: null, prop: 'defaultValue'});

      let options = _.cloneDeep(this.options);
      options.splice(index, 1);

      this.$emit('input', {value: options, prop: 'options'})
      this.$emit('input', {value: this.field, prop: 'dependencies', operate: 'delete'})
    },
    batchEdit(){
      let newValues = this.optionText.split('\n').filter(option => option);
      if(!newValues.length) {
        feAlert(this.$t('common.base.tip.evenHaveOneOption2'));
        return false;
      }

      this.errMessage = this.validateOptions(newValues);
      if(this.errMessage) return false;

      let newOptions = newValues.map(item => ({value: item, isDefault: false}));
      // 补全默认值
      if(!this.field.isMulti){
        let defaultValue = this.field.defaultValue;
        for(let i = 0; i < newOptions.length; i++){
          let option = newOptions[i];
          if(defaultValue == option.value){
            option.isDefault = true;
            break;
          }
        }
      }
      this.$emit('input', {value: newOptions, prop: 'options'})
      this.$emit('input', {value: this.field, prop: 'dependencies', operate: 'delete'})

      this.batchModalShow = false;
    }
  },
  components: {
    draggable,
  }
}
</script>